<!DOCTYPE html>
<html>
   <body>
      <h1>Trigger DBus Desktop Notifications via WAMP</h1>
      <form>
         <p>
            Title: <input id="notification_title" type="text" size="50" maxlength="50" value="Awesome notification!!">
         </p>
         <p>
            Body: <input id="notification_body" type="text" size="50" maxlength="50" value="Some notification text. Bla bla bla.">
         </p>
      </form>
      <button onclick="sendNotification();">Send Notification!</button>

      <script src="/autobahn.min.js"></script>
      <script>

         var session = null;

         var domTitle = document.getElementById('notification_title');
         var domBody = document.getElementById('notification_body');

         // the URL of the WAMP Router (e.g. Crossbar.io)
         //
         var wsuri;
         if (document.location.origin == "file://") {
            wsuri = "ws://localhost:9000";
         } else {
            wsuri = "ws://" + document.location.hostname + ":9000";
         }
         
         // connect to WAMP server
         //
         var connection = new autobahn.Connection({
            url: wsuri,
            realm: 'realm1'
         });

         connection.onopen = function (new_session) {
            console.log("connected to " + wsuri);
            session = new_session;
         };

         connection.onclose = function (reason, details) {
            console.log("connection gone", reason, details);
            session = null;
         }

         connection.open();


         function sendNotification() {

            if (session) {
               session.publish("com.example.dbus.on_notify", [domTitle.value, domBody.value, 2]);
            } else {
               console.log("not connected");
            }
            return;

            var topic = "http://example.com/topics/" + domReceiver.value;

            session.publish(topic, {app: "Autobahn WebSocket",
                                    title: domTitle.value,
                                    body: domBody.value,
                                    duration: 2});
         };
      </script>
   </body>
</html>
